<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
<meta http-equiv="content-language" content="ja" /> 
<meta http-equiv="content-script-type" content="text/javascript" /> 
<meta http-equiv="content-style-type" content="text/css; charset=UTF-8" />
<title>Interface Demo</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
<script type="text/javascript"><!--
google.load("language", "1"); 
google.load("jquery", "1");
google.load("jqueryui", "1");
//-->
</script>
<script type="text/javascript" src="jquery.animate-colors.js"></script> 

<script type="text/javascript"><!--
jQuery(function($)
{
	var construct = function()
	{
		$('.theme_node img.add').click(addNode);
	}

	var main = function()
	{
	}

	var addNode = function()
	{
		var path  = $(this).parent().parent().attr('name');
		var depth = getDepth(path);
		var other = getOther(path);
		var parentTr = $(other).parent().parent();

		var nextTr = parentTr.clone().insertBefore(parentTr);
		nextTr.find('.theme_node').hide().show("fast");
	}

	var getOther = function(path)
	{
		var pathRegex = path.replace(/\//g, "\\/");
		var other = null;

		$('[name^='+path+'][name$=:other]').each(function()
		{
			var otherPath = $(this).attr('name');
			var re = new RegExp("^" + pathRegex + "\\/[a-z0-9]+:other$");

			if ( otherPath.search(re) > -1  )
			{
				other = this;
				return;
			}
		});

		return other;
	}

	var getDepth = function(path)
	{
		return path.split(':').length;
	}

	var var_dump = function(val)
	{
		$('body').append('<div>'+val+'</div>');
	}

	construct();
	main();
});

function obj2str(obj, space) {
  var lf = "<br>";

  if (space == undefined) {
    space = " ";
  } else {
    space = space.replace(" ", "    ");
  }

  var str = "";  for (key in obj) {
    str += space;

    if (typeof(obj[key]) != "object") {
      str += key + ":" + obj[key] + lf;
    } else {
      if (isNaN(parseInt(key))) {
        str += key + ":Object()" + lf;
      } else {
        str += "[" + key + "]" + lf;
      }

      str += obj2str(obj[key], space);
    }
  }

  return str;
}
 //-->
</script>
<style>
.theme_tree {
	border-collapse: collapse;
	}

	.theme_tree td {
		padding: 5px 30px;
		}

.theme_node {
	width: 160px;
	height: 120px;
	background: #eee;
	margin: 0 0 10px 0;
	padding: 5px;
	position: relative;
	border: 5px solid #444;
	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	box-shadow: 5px 5px 30px #999;
	-webkit-box-shadow: 5px 5px 30px #999;
	-moz-box-shadow: 5px 5px 30px #999;
	}

.theme_node .caption,
.theme_node .criteria,
.theme_node .theme,
.theme_node .target,
.theme_node .control {
	display: block;
	}

.theme_node .criteria,
.theme_node .target,
.theme_node .theme {
	text-align: center;
	}

.theme_node .control {
	position: absolute;
	right: 5px;
	bottom: 16px;
	width: 16px;
	}

.theme_node .control img {
	margin: 3px 0 0 0;
	}


</style>
</head> 
<body>

<table class="theme_tree">
<tr>

<td depth="1">
<div class="theme_node" name="/themes">
<span class="caption">条件</span>
<span class="criteria">ブラウザ</span>
<span class="control"><img src="add.png" class="add"><img src="delete.gif" class="delete"></span>
</div>
</td>

<td depth="2">
<div class="theme_node" name="/themes/browser:iphone">
<span class="target">iPhone</span>
<span class="theme"><img src="thumb1.png"></span>
<span class="control"><img src="node.png" class="deverge"><img src="delete.gif" class="delete"></span>
</div>
</td>

<td depth="3"></td>
<td depth="4"></td>

</tr>

<tr>

<td depth="1"></td>

<td depth="2">
<div class="theme_node" name="/themes/browser:pc">
<span class="target">PC</span>
<span class="caption">条件</span>
<span class="criteria">グループ</span>
<span class="control"><img src="add.png" class="add"><img src="delete.gif" class="delete"></span>
</div>
</td>

<td depth="3">
<div class="theme_node" name="/themes/browser:pc/group:admin">
<span class="target">管理者</span>
<span class="caption">条件</span>
<span class="criteria">日付</span>
<span class="control"><img src="add.png" class="add"><img src="delete.gif" class="delete"></span>
</div>
</td>

<td depth="4">
<div class="theme_node" name="/themes/browser:pc/group:admin/date:2010-08">
<span class="target">2010-08</span>
<span class="theme"><img src="thumb3.png"></span>
<span class="control"><img src="node.png" class="deverge"><img src="delete.gif" class="delete"></span>
</div>
</td>

</tr>

<tr>

<td depth="1"></td>
<td depth="2"></td>
<td depth="3"></td>

<td depth="4">
<div class="theme_node" name="/themes/browser:pc/group:admin/date:2010-09">
<span class="target">2010-09</span>
<span class="theme"><img src="thumb4.png"></span>
<span class="control"><img src="node.png" class="deverge"><img src="delete.gif" class="delete"></span>
</div>
</td>

</tr>

<tr>

<td depth="1"></td>
<td depth="2"></td>
<td depth="3"></td>

<td depth="4">
<div class="theme_node" name="/themes/browser:pc/group:admin/date:other">
<span class="target">その他</span>
<span class="theme"><img src="thumb5.png"></span>
<span class="control"><img src="node.png" class="deverge"></span>
</div>
</td>

</tr>

<tr>

<td depth="1"></td>
<td depth="2"></td>

<td depth="3">
<div class="theme_node" name="/themes/browser:pc/group:user">
<span class="target">登録ユーザ</span>
<span class="caption">条件</span>
<span class="criteria">モジュール</span>
<span class="control"><img src="add.png" class="add"><img src="delete.gif" class="delete"></span>
</div>
</td>

<td depth="4">
<div class="theme_node" name="/themes/browser:pc/group:user/module:bulletin">
<span class="target">Bulletin</span>
<span class="theme"><img src="thumb6.png"></span>
<span class="control"><img src="node.png" class="deverge"><img src="delete.gif" class="delete"></span>
</div>
</td>

</tr>

<tr>

<td depth="1"></td>
<td depth="2"></td>
<td depth="3"></td>

<td depth="4">
<div class="theme_node" name="/themes/browser:pc/group:user/module:pico">
<span class="target">Pico</span>
<span class="theme"><img src="thumb1.png"></span>
<span class="control"><img src="node.png" class="deverge"><img src="delete.gif" class="delete"></span>
</div>
</td>

</tr>

<tr>

<td depth="1"></td>
<td depth="2"></td>
<td depth="3"></td>

<td depth="4">
<div class="theme_node" name="/themes/browser:pc/group:user/module:other">
<span class="target">その他</span>
<span class="theme"><img src="thumb2.png"></span>
<span class="control"><img src="node.png" class="deverge"></span>
</div>
</td>

</tr>

<tr>

<td depth="1"></td>
<td depth="2"></td>

<td depth="3">
<div class="theme_node" name="/themes/browser:pc/group:other">
<span class="target">その他</span>
<span class="theme"><img src="thumb2.png"></span>
<span class="control"><img src="node.png" class="deverge"></span>
</div>
</td>

<td depth="4"></td>

</tr>
<tr>

<td depth="1"></td>

<td depth="2">
<div class="theme_node" name="/themes/browser:other">
<span class="target">その他</span>
<span class="theme"><img src="thumb2.png"></span>
<span class="control"><img src="node.png" class="deverge"></span>
</div>
</td>

<td depth="3"></td>

<td depth="4"></td>

</tr>

</table>

</body>
</html>